

import React, { Component } from "react";
import OmsSelect from '../../../../components/display/omsSelect';
import {CompanyType} from './selectData';
import { Form, Input, Row, Col, Button, DatePicker, Upload, Icon, Tooltip, message } from 'antd';
import SaasModal from '../../../../components/display/SaasModal';
import PickCity from '../../../../components/display/pickCity';
import AreaPicker from '../../../../components/dataEntry/areaPicker';
import {EVCSAdd,EVCSDetails,prefixFile} from '../../../../fetch/fetchApi';

const { RangePicker } = DatePicker;
const FormItem = Form.Item;
const createForm = Form.create;
// const {TextArea} = Input;

class EVCSItem extends Component {
    constructor(props) {
        super(props);
        this.state = {
            refresh:0,
            DetailInfo:{},
        };
    }

    componentWillReceiveProps(nextProps){
        if(nextProps.visible&&nextProps.selectInfo.appkey&&nextProps.hasGetApi){
            console.log('nextProps.selectInfo.appke',nextProps.selectInfo.appkey);
            EVCSDetails({appkey:nextProps.selectInfo.appkey}).then(response=>{
                let res=response.data;
                console.log('res',res);
                this.props.alreadyGet();
                if(res&&res.data){
                    this.setState({
                        DetailInfo:res.data,
                    },()=>{console.log(this.state.DetailInfo)})
                }
            })
        }
        if(!nextProps.selectInfo.appkey){
            this.setState({
                DetailInfo:{},
            })
        }
    }


    handleSubmit =(e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!!err) {
                return;
            }
            console.log(values);
            if(values.area.length===2){
                values.area=values.area[1]+"00"
            }
            if(!this.props.selectInfo.appkey){
                debugger;
                values.add=1;
            }
            if(typeof values.licenceImg==="string"){
                values.licenceImg=values.licenceImg;
            } 
            if(values.licenceImg&&values.licenceImg.file){
                if(values.licenceImg.file.status!=="success"){
                    values.licenceImg=undefined;
                }
                if(values.licenceImg.file.status==="success"){
                    values.licenceImg=values.licenceImg.file.response.data.fileIdList[0];
                }
            }
            EVCSAdd(values).then(response=>{
                console.log('response',response);
                let res=response.data
                if(res.data){
                    this.props.handleCancel();
                    this.props.freshTable();
                    message.success('新增成功');
                }
            })
        });
    };

    

    validateKey = (rule, value, callback) => {
        if (value && value.length>18) {
            callback('请输入正确的社会信用代码');
        } else {
            callback();
        }
    }

    validateMail = (rule, value, callback) => {
        let myreg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        if (value && !myreg.test(value)) {
            callback('请输入正确的邮箱');
        } else {
            callback();
        }
    };

    validatePhone = (rule, value, callback) => {
        let myreg = /^1[3|4|5|7|8|9][0-9]{9}$/;
        if (value && !myreg.test(value)) {
            callback('请输入正确的手机号');
        } else {
            callback();
        }
    };

    normFile = (e) => {
        if (Array.isArray(e)) {
          return e;
        }
        return e.file;
      }


    render() {
        let city;
        let province;
        if(this.state.DetailInfo.area){
            city=this.state.DetailInfo.area.substr(0, this.state.DetailInfo.area.length-2);
            province=this.state.DetailInfo.area.substr(0,2);
        }

        console.log(province,city)
        
        const {getFieldDecorator} = this.props.form;
        const wrapper={
            xl:18
        };
        const config = {
            rules: [
                {
                    required: true,
                    message: "该项为必填项"
                }
            ]
        };
        const formItemLayout = {
            labelCol: {
              xl: { span: 4 },
              sm: { span:  8},
            },
            wrapperCol: {
              xl: { span: 20 },
              sm: { span: 16 },
            },
          };
          const tailFormItemLayout = {
            wrapperCol: {
              xl: {
                span: 20,
                offset: 4,
              },
            },
          };
          const props = {
            name: 'file',
            action: `${prefixFile}/uploadFile.do?resultFlag=2`,
            headers: {
                authorization: 'authorization-text',
            },
            onChange:(info)=> {
                console.log(info);
            },
        };
        return(
            <SaasModal visible={this.props.visible} handleCancel={this.props.handleCancel} title={'新增/修改'}>
                <form form={this.props.form}>
                    <Row gutter={4}>
                        <Col {...wrapper}>
                            <FormItem
                            label="APPKEY"
                            {...formItemLayout}
                            >
                                {getFieldDecorator('appkey',{
                                    rules: [
                                        {
                                            required: true,
                                            message: "该项为必填项"
                                        },
                                        { validator: this.validateKey}
                                    ],
                                    initialValue:this.state.DetailInfo.appkey
                                })(
                                    <Input placeholder={'统一社会信用代码'} disabled={Boolean(this.state.DetailInfo.appkey)}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col {...wrapper}>
                            <FormItem
                            label="产品名称"
                            {...formItemLayout}
                            >
                                {getFieldDecorator('productName',{...config,...{initialValue:this.state.DetailInfo.productName}})(
                                    <Input placeholder={'请输入产品名称'}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col {...wrapper}>
                            <FormItem
                            label="公司名称"
                            {...formItemLayout}
                            >
                                {getFieldDecorator('companyName',{...config,...{initialValue:this.state.DetailInfo.companyName}})(
                                    <Input placeholder={'请输入公司名称'}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col {...wrapper}>
                            <FormItem
                            {...formItemLayout}
                            label="企业类型"
                            >
                                {getFieldDecorator('companyType',{...config,...{initialValue:this.state.DetailInfo.companyType?this.state.DetailInfo.companyType.toString():undefined}})(
                                    <OmsSelect data={CompanyType}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col {...wrapper}>
                            <FormItem
                            {...formItemLayout}
                            label="法人姓名"
                            >
                                {getFieldDecorator('legalUserName',{initialValue:this.state.DetailInfo.legalUserName})(
                                   <Input placeholder={'请输入法人姓名'}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col {...wrapper}>
                            <FormItem
                            {...formItemLayout}
                            label="执照号码"
                            >
                                {getFieldDecorator('licenceNo',{initialValue:this.state.DetailInfo.licenceNo})(
                                    <Input placeholder={'请输入营业执照号码'}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col {...wrapper}>
                            <FormItem
                            {...formItemLayout}
                            label="执照照片"
                            >
                                {getFieldDecorator('licenceImg',{initialValue:this.state.DetailInfo.licenceImg})(
                                    <Upload {...props}>
                                        <Button type={'primary'}>上传图片</Button>
                                    </Upload>
                                )}
                            </FormItem>
                        </Col>
                        <Col {...wrapper}>
                            <FormItem
                            {...formItemLayout}
                            label="主营业务"
                            >
                                {getFieldDecorator('bizInfo',{initialValue:this.state.DetailInfo.bizInfo})(
                                    <Input placeholder={"请输入主营业务"}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col {...wrapper}>
                            <FormItem
                            {...formItemLayout}
                            label="所在城市"
                            >
                                {getFieldDecorator('area',{...config,...{initialValue:[province,city]}})(
                                    <AreaPicker placeholder={'所在城市'}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col {...wrapper}>
                            <FormItem
                            {...formItemLayout}
                            label="联系人姓名"
                            >
                                {getFieldDecorator('bizContactUser',{...config,...{initialValue:this.state.DetailInfo.bizContactUser}})(
                                    <Input placeholder={"请输入联系人姓名"}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col {...wrapper}>
                            <FormItem
                            {...formItemLayout}
                            label="联系人电话"
                            >
                                {getFieldDecorator('bizContactTel',{
                                    rules: [
                                        {
                                            required: true,
                                            message: "该项为必填项"
                                        },
                                        { validator: this.validatePhone}
                                    ],
                                    initialValue:this.state.DetailInfo.bizContactTel
                                })(
                                    <Input placeholder={"请输入联系人电话"}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col {...wrapper}>
                            <FormItem
                            {...formItemLayout}
                            label="联系人邮箱"
                            >
                                {getFieldDecorator('bizContactMail',{
                                    rules: [
                                        {
                                            required: true,
                                            message: "该项为必填项"
                                        },
                                        { validator: this.validateMail}
                                    ],
                                    initialValue:this.state.DetailInfo.bizContactMail
                                })(
                                    <Input placeholder={"请输入联系人邮箱"}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col {...wrapper}>
                            <FormItem
                            {...formItemLayout}
                            label="我司对接人"
                            >
                                {getFieldDecorator('bizUser',{...config,...{initialValue:this.state.DetailInfo.bizUser}})(
                                    <Input placeholder={"请输入我司对接人姓名"}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col {...wrapper}>
                            <FormItem
                            {...tailFormItemLayout}
                            >
                                <Button style={{marginRight:4}} type="primary" htmlType="submit" onClick={this.handleSubmit}>{'保存配置'}</Button>
                            </FormItem>
                        </Col>
                    </Row>
                </form>
            </SaasModal>
        )
    }
}
EVCSItem = createForm()(EVCSItem);
export default EVCSItem;